<template>
  <div id="app">
   <!-- <transition name="fade" enter-active-class="animated  flipInY" leave-active-class="animated  flipOutY">
      <keep-alive>
        <router-view class="child-view "></router-view>
      </keep-alive>
    </transition> -->
   <transition :name="transitionName" >
      <keep-alive>
        <router-view class="child-view "></router-view>
      </keep-alive>
    </transition>
  </div>
</template>


<script>
  export default {
    name: "app",
    data() {
      return {
        transitionName: "",
      };
    },
    watch: {
      $route(to, from) {
        //页面的进出通过路由上的时间戳参数来决定
        const prevStamps = from.query.stamps || 0;
        const nextStamps = to.query.stamps || 0;
        this.transitionName =
          prevStamps > nextStamps ? "slide-right" : "slide-left";

          //如果to索引大于from索引,判断为前进状态,反之则为后退状态
             if (to.meta.index > from.meta.index) {
              //设置动画名称
              this.transitionName = "slide-left";
             } else {
              this.transitionName = "slide-right";
             }
      },
    },
  };
</script>


<style scoped>
  #app {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
     background: #011337;
  }

 /* .child-view {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

 .slide-left-enter {
    opacity: 0;
    transform: translate(100%, 0);
  }

  .slide-left-enter-active {
    z-index: 10;
  }

  .slide-left-leave-active {
    z-index: 0;
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translate(100%, 0);
    z-index: 11;
  } */
  

   /* 这个是必须的, 是为了让页面脱离文档流, 不然的话, 后进入的页面会从页面底部出来
   这个定位会直接添加到路由匹配的组件根元素上, 所以页面根组件最好设定其宽度为100vw */
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
   will-change: transform;
   transition: all 0.5s;
  
   width: 100vw;
   position: absolute;
  }
  .slide-right-enter {
   opacity: 0;
   transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
   opacity: 0;
   transform: translate3d(-100%, 0, 0);
  }
</style>
